<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-10 22:56:03
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-06-13 23:12:17
 * @FilePath: /chat-ai-plus/src/components/Popup/Popup.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE, 
-->
<template>
  <u-popup :show="true" class="popup" mode="center">
    <view class="popup-container">
      <u-button class="close-btn" icon="close" @click="handleCancel"></u-button>

      <Instruct @submit="handleSubmit"></Instruct>
    </view>
  </u-popup>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import uPopup from 'uview-plus/components/u-popup/u-popup.vue';
import uOverlay from 'uview-plus/components/u-overlay/u-overlay.vue';
import uTransition from 'uview-plus/components/u-transition/u-transition.vue';
import Instruct from '@/components/Instruct/index';
import useInstructionStore from '@/store/modules/instruction';
import useChatStore from '@/store/modules/chat';

export default defineComponent({
  name: 'PopupInstruct',
  components: {
    uPopup,
    uOverlay,
    uTransition,
    Instruct
  },
  emits: ['vanish'],
  setup(_, { emit }) {
    const instructionStore = useInstructionStore();
    const chatStore = useChatStore();
    const handleCancel = () => {
      emit('vanish');
    };

    const handleSubmit = () => {
      instructionStore.getInstructionList(chatStore.currentModel.version);
      emit('vanish');  
    }
    return {
      handleCancel,
      handleSubmit
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.popup-container {
  width: 420px;
  padding: map-get($spaces, lg);
  border-radius: map-get($radii, lg);
  background:  #fff;
  // background: url('./static/images/login-bg.png') center center/cover no-repeat;

  .image-box {
    padding: $space;
    border-radius: map-get($radii, lg);
    background: $white-color;
  }

  .hint {
    font-size: 12px;
  }

  .close-btn {
    position: absolute;
    top: map-get($spaces, xs);
    right: map-get($spaces, xs);
    width: 50px;
    border: none;
    background: none;
  }
}

.form-item {
  background: $white-color;
  border-radius: $radius;
  padding: map-get($spaces, sm);
  :deep(.u-form-item__body){
    padding: unset !important;
  }
  :deep(.u-form-item__body__left){
    width: unset !important;
  }
  & + .form-item {
    margin-top:  $space;
  }
}
</style>

